<template>
    <div class="el-dialog__body">

        <div>

       <el-row :gutter="20">
           <el-col :span="6"> <div class="grid-content bg-purple">【题型】:{{ format(purple.questionType) }}</div></el-col>
           <el-col :span="6"> <div class="grid-content bg-purple">【编号】:{{ purple.id }}</div></el-col>
           <el-col :span="6"> <div class="grid-content bg-purple" >【难度】:{{ formatter(purple.difficulty) }}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple">【标签】:{{ purple.tags }}</div></el-col>
       </el-row>
       <el-row :gutter="20">
           <el-col :span="6"><div class="grid-content bg-purple">【学科】:{{ purple.subjectName }}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple">【目录】:{{ purple.directoryName }}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple">【方向】:{{ purple.direction }}</div></el-col>
       </el-row>
   </div>
   <hr>
   <div>
       <p>【题干】：</p>
       <p v-html=" purple.question"> {{ purple.question }} </p>
       <p> {{ format(purple.questionType) }}题 选项： （以下选中的选项为正确答案）</p>
       <label data-v-61b2ab32="" role="radio" aria-checked="true" tabindex="0" class="el-radio is-checked">
         <!-- 单选题 -->
         <div>
           <el-radio v-for="(item,index) in purple.options"
           v-model="item.isRight"
           is-checked :key="index"
            :label="index">{{item.code}}. {{item.title}}</el-radio>
       </div>

             </label>
       <hr>
    <div>
        <p>【参考答案】：<el-button type="danger" @click="aa" size="small" >视频答案预览</el-button></p>
        <video  width="300px" height="200px" controls="controls"
        v-if="guanbi"
        :src="purple.videoURL" autoplay>
            <source  >
            </video>
        <hr>
     【答案解析】:<p v-html="purple.answer">：{{ purple.answer }}</p>
        <hr>
        <p>【题目备注】：{{ purple.remarks }}</p>
    </div>

    </div>

    </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'

export default {
  props: {
    link: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      guanbi: false, // 视频显示
      radio: '',
      purple: [],
      videoURL: []
    }
  },
  created () {
    this.detail()
  },
  methods: {
    async detail () {
      const res = await detail(this.link)

      this.purple = res.data
      this.videoURL = res.data.videoURL
    },

    formatter (row, column, cellValue, index) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = difficulty.find(item => item.id === cellValue)
      return obj ? obj.label : ''
    },
    format (row, column, cellValue, index) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = questionType.find(item => item.id === cellValue)
      return obj ? obj.label : ''
    },
    // 点击按钮隐藏视频
    aa () {
      this.guanbi = true
    }

  }

}
</script>
<style>
.el-dialog__body{
    padding: 10px 9px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    height: 100%;
}
.el-col-6 {
    width: 25%;
    padding: 10px 0;
}

</style>
